<template>
<div class="">
      <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>权限管理</el-breadcrumb-item>
            <el-breadcrumb-item>角色管理</el-breadcrumb-item>
        </el-breadcrumb>
             <el-card>
            <!-- 搜索与添加 -->
            <el-row :gutter="20">
                    <el-button type="primary" @click="dialogVisible=true">添加角色</el-button>
                <!-- </el-col> -->
            </el-row>
            
         <el-table :data="rolelist" border stripe>
             <!-- //展开信息 -->
            <el-table-column type="expand">
           <template slot-scope="scope" >
                    <!-- //第一层循环 -->
                    <tr v-for="(item,index) in scope.row.children" :key="index">
                        <td>
                           <el-tag size="medium" closable @close="removeByid(scope.row,item.id)"> {{item.authName}}</el-tag>
                        </td>
                        <!-- 第二层循环 -->
                        <td>
                            <tr  v-for="(item1,index1) in item.children" :key="index1">
                                <td>
                                    <el-tag type="success" closable @close="removeByid(scope.row,item1.id)">  {{item1.authName}}</el-tag>
                                </td>
                                <td v-for="(item2,index2) in item1.children" :key="index2">
                                       <el-tag type='warning' closable @close="removeByid(scope.row,item2.id)"> {{item2.authName}}</el-tag>
                                </td>
                            </tr>
                        </td>
                        
                       
                    </tr>

            </template>
            </el-table-column>
                <el-table-column type="index" label="#"></el-table-column>
                <el-table-column label="角色名称" prop="roleName"></el-table-column>
                <el-table-column label="角色描述" prop="roleDesc"></el-table-column>
              
              <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" size="mini"  @click="xiu(scope.row)"></el-button>
                        <el-button type="primary" icon="el-icon-setting" size="mini" @click="fenpei(scope.row)"></el-button>
                        <el-button type="primary" icon="el-icon-delete" size="mini" @click="sc(scope.row)"></el-button>
                    </template>
              </el-table-column>
            </el-table>
   </el-card>
      <!-- //添加角色提示 -->
            <el-dialog title="提示" :visible.sync="dialogVisible" width="50%">
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="角色名称" prop="roleName">
                    <el-input v-model="ruleForm.roleName"></el-input>
                    </el-form-item>
                     <el-form-item label="角色描述" prop="roleDesc">
                    <el-input v-model="ruleForm.roleDesc"></el-input>
                    </el-form-item>
                    </el-form> 
                <span slot="footer" class="dialog-footer">
                  <el-button @click="dialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="add">确 定</el-button>
                </span>
            </el-dialog>

       <!-- 删除提示框 -->
         <el-dialog
                title="提示"
                :visible.sync="centerDialogVisible"
                width="30%">
                <span>删除这条用户的信息</span>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="centerDialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click=scqd>确 定</el-button>
                </span>
        </el-dialog>
        <!-- 编辑提示框 -->
     <el-dialog title="修改角色" :visible.sync="editDialogVisible" width="50%" >
          <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="100px">
            <el-form-item label="用户名称" prop="roleName">
              <el-input v-model="editForm.roleName"></el-input>
            </el-form-item>
            <el-form-item label="角色描述" prop="roleDesc">
              <el-input v-model="editForm.roleDesc"></el-input>
            </el-form-item>
          </el-form>
     <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="xiugaiqd">确 定</el-button>
    </span>
</el-dialog>
<!-- //分配权限提示框 -->
   <el-dialog title="分配权限" :visible.sync="setRightDialogVisible" width="50%" >
      <!-- 树形控件 -->
       <el-tree
        :data="fplist"
        show-checkbox
        node-key="id"  
        :default-checked-keys="defKeys"
        default-expand-all
        ref="ning"
        :props="treeProps" >
      </el-tree>
       <el-button @click="setRightDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="fpqd">确 定</el-button>

    </el-dialog>


</div>
</template>

<script>
import {
  roleslist,
  addrole,
  delrole,
  xiugai,
  delroleById,
  getfpall,
  juesesq
} from "@/api/api.js";
export default {
  name: "Roles",
  data() {
    return {
      fplist: [],
      ruleForm: {
        roleName: "",
        roleDesc: ""
      },
      editForm: {
        //修改
        roleName: "",
        roleDesc: ""
      },
      treeProps: {
        //给树形绑定属性
        label: "authName",
        children: "children"
      },
      delete: {
        //删除id
        id: ""
      },
      dialogVisible: false, //对话框显示与隐藏
      editDialogVisible: false, //修改显示与隐藏
      centerDialogVisible: false, //删除对话框
      setRightDialogVisible: false, //分配权限
      rolelist: [], //所有角色列表数据
      defKeys: [],
      zhao:'',
      roleId: "", //分配权限角色id
      rules: {
        roleName: [
          { required: true, message: "请输入角色名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        roleDesc: [
          { required: true, message: "请输入角色描述", trigger: "blur" }
        ]
      },
      editFormRules: {
        roleName: [
          { required: true, message: "请输入角色名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        roleDesc: [
          { required: true, message: "请输入角色描述", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    //钩子函数实例创建之后
    //请求接口
    this.xrym(); //渲染页面
  },
  methods: {
    xrym() {
      roleslist().then(res => {
        //请求接口
        this.rolelist = res.data;
        // console.log(this.rolelist);
      });
    },

    //修改
    xiu(e) {
      console.log(e.roleName);
      this.editForm.roleName = e.roleName;
      this.editForm.roleDesc = e.roleDesc;
      this.editForm.id = e.id;
      this.editDialogVisible = true;
    },
    //修改确定
    xiugaiqd() {
      xiugai(this.editForm).then(res => {
        // console.log(res);
        this.editDialogVisible = false;
        this.xrym();
      });
    },

    //添加
    add() {
      this.$refs.ruleForm.validate(async valid => {
        if (!valid) return;
        const res = await addrole(this.ruleForm);
        if (res.meta.status === 201) {
          this.$message.success(res.meta.msg);
          // 隐藏添加用户的对话框
          this.dialogVisible = false;
          // 重新获取用户列表数据
          this.xrym();
        }
      });
    },
    //删除方法
    scff() {
      delrole(this.delete.id).then(res => {
        // console.log(res);
        this.xrym();
      });
    },
    //删除
    sc(e) {
      (this.centerDialogVisible = true), console.log(e);
      this.delete.id = e.id;
    },
    scqd() {
      //删除确定
      (this.centerDialogVisible = false),
        this.$message.success("删除用户成功！");
      this.scff();
    },
    // 根据id删除对应的权限
    async removeByid(role, rightId) {
      let res = await delroleById({ roleId: role.id, rightId: rightId });
      if (res.meta.status == 200) {
        this.$message.success(res.meta.msg);
        role.children = res.data;
      }
    },
    //fp()里面是api.js封装好借口，请求过来的所有权限
    fp() {
      getfpall().then(res => {
        this.fplist = res.data;
        // console.log(res.data);
      });
    },

    // 递归
      dg(node,bb){
        if(!node.children){
          return bb.push(node.id)
        }

      node.children.forEach(item => {
        this.dg(item,bb)
      });
    },
    //点击分配
    fenpei(i) {
      this.setRightDialogVisible = true;
      this.dg(i,this.defKeys)
      this.zhao=i.id
      this.xrym()
   
      this.fp();
    },
    // 分配确定
    fpqd(){
      const chen = [
        ...this.$refs.ning.getCheckedKeys(),...this.$refs.ning.getHalfCheckedKeys(),
      ]
      const arr =chen.join(",")
       console.log(arr);

      juesesq({id:this.zhao,rids:arr}).then(res=>{
        this.xrym()
      })
      this.defKeys=[]
      this.setRightDialogVisible=false
   
    },
 
  },
  components: {
    //注册子组件
  },

  watch: {
    //监听
  }
};
</script>
<style lang="scss" scoped>
.el-table {
  margin-top: 30px;
}
</style>